<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>过渡</title>
        <style>

            /* transition 过渡属性是CSS3浓墨重彩的特性，过度可以为一个元素在不同样式之间变化自动添加“补间动画” */
            /* transition属性有4个要素
               transition:  width(什么属性要过渡) 1s(动画时长) linear(变化速度曲线) 0s(延迟时间);

               过渡的四个小属性
               transition-property 哪些属性要过渡
               transition-duratin 动画时间
               transitin-timing-function 动画变化曲线（缓动效果）
               transition-delay 延迟时间
            */
            /* 哪些属性可以参与过渡
                  - 所有数值类型的属性，都可以参与过渡，比如wideth、height、left、top、border-radius
                  - 背景颜色和文字颜色都可以被过渡
                  - 所有变形（包括2D和3D）都能被过渡
               如果要所有属性都参与过渡，可以写all
                  transition: all 1s linear 0s;
            */

            * {
                margin: 0px;
                padding: 0px;
            }
            .box {
                width: 200px;
                height: 200px;
                background-color: orange;
                transition: width 5s linear 0s;
                margin-bottom: 10px;
            }
            .box:hover {
                width: 800px;
            }

            .box2 p{
                position:relative;
                width: 200px;
                height: 200px;
                background-color: orange;
                transition: left 1s linear 0s;
                left: 0;
                margin-bottom: 10px;
            }
            .box2:hover p{
                left: 1000px;
            }
            .box3 {
                width: 200px;
                height: 200px;
                background-color: red;
                transition: background-color 1s linear 0s;
                margin-bottom: 10px;
            }
            .box3:hover {
                background-color: green;
            }

            .box4 {
                width: 200px;
                height: 200px;
                background-color: red;
                transition: border-radius 1s linear 0s;
                margin-bottom: 10px;
                border-radius: 0;
            }            
            .box4:hover {
                border-radius: 50%;
            }

            .box5 {
                width: 200px;
                height: 200px;
                background-color: orange;
                margin-bottom: 10px;
                transition: transform 1s linear 0s;
            }
            .box5:hover {
                transform: scale(1.2) rotate(360deg);
            }

            .box6 {
                perspective: 300px;
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                margin-bottom: 10px;
            }
            .box6 p {
                width: 200px;
                height: 200px;
                background-color: orange;
                transition: transform 1s linear 0s;
            }
            .box6:hover p {
                transform: rotateX(360deg) rotateY(360deg);
            }

            .box7 {
                width: 200px;
                height: 200px;
                background-color: orange;
                border-radius: 0;
                transition: all 1s linear 0s; 
            }
            .box7:hover {
                width: 400px;
                height: 160px;
                background-color: green;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <div class="box2">
            <p></p>
        </div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6">
            <p></p>
        </div>
        <div class="box7"></div>
    </body>
</html>